<template>
  <div class="scrollbar-over" :style="{height:table.tableHeight+'px'}">
    <el-table
      :data="table.data"
      class="table-vm"
      :row-class-name="dateType"
      :header-cell-style="{background:'rgb(9,36,65)',color:'rgb(23,162,207)'}"
      :cell-style="RowStyle"
      @selection-change="handleSelectionChange"
      stripe
      v-loading="table.loading"
    >
      <!-- 多选 -->
      <el-table-column v-if="table.hasSelect" type="selection" width="45"></el-table-column>
      <!-- 展开行 -->
      <el-table-column type="expand" v-if="table.hasExpand">
        <template slot-scope="props">
          <!-- <el-form
          label-position="left"
          inline
          class="table-expand"
          >-->
          <!-- <el-button
            v-for="item in table.expands"
            :key="item.id"
            plain
            type="primary"
            size="mini"
            @click="expandClick(item.label,props.$index, props.row)"
            v-text="item.title"
          />-->
          <!-- </el-form> -->
          <el-form
            class="legal-terms-form"
            v-if="table.hasExpand === true && table.expands[0].orders!==undefined"
          >
            <el-form-item label="自由裁量权：">{{ props.row.data[3].name }}</el-form-item>
            <el-form-item label="违反条款：">{{ props.row.data[1].name }}</el-form-item>
            <el-form-item label="法律依据：">{{ props.row.data[2].name }}</el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <template v-for="col in table.tHead">
        <el-table-column
          v-if="col.show !== false && col.show === 'template'"
          :prop="col.prop"
          :key="col.id"
          align="center"
          :label="col.label"
          :width="col.width ? col.width : ''"
          :min-width="col.minWidth ? col.minWidth : ''"
          :sortable="table.sortable !== undefined ? table.sortable : true"
          :show-overflow-tooltip="table.ShowTip"
        >
          <template slot-scope="scope">
            <slot :name="col.prop" :obj="scope" />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="col.show !== false && col.show !== 'template'"
          :prop="col.prop"
          :key="col.id"
          align="center"
          :label="col.label"
          :class-name="col.prop"
          :show-overflow-tooltip="table.ShowTip"
          :width="col.width ? col.width : ''"
          :min-width="col.minWidth ? col.minWidth : ''"
          :sortable="table.sortable !== undefined ? table.sortable : true"
        />
      </template>
      <!-- 自定义操作 -->
      <el-table-column
      align="center"
        column-key="operation"
        :fixed="table.operation.fixed"
        v-if="table.hasOperation"
        :label="table.operation.label"
        :width="table.operation.width ? table.operation.width : ''"
        :min-width="table.operation.minWidth ? table.operation.minWidth : ''"
        :class-name="table.operation.className"
      >
        <template slot-scope="scope">
          <el-button
            v-for="item in table.operation.data"
            :key="item.id"
            :class="item.classname? item.classname:''"
            :size="item.size"
            :type="item.btnType"
            @click="handleOperation(scope.$index, scope.row, item.id)"
          >{{item.label}}</el-button>
        </template>
      </el-table-column>
      <!-- 自定义操作 -->
      <!-- <el-table-column column-key="operationOne"
                     v-if="table.hasOperationOne"
                     :label="table.operationOne.label"
                     :width="table.operationOne.width ? table.operationOne.width : ''"
                     :min-width="table.operationOne.minWidth ? table.operationOne.minWidth : ''"
                     :class-name="table.operationOne.className">
      <template slot-scope="scope">
        <span plain
              v-for="item in table.operationOne.data"
              :key="item.id"
              :class="item.classname? item.classname:''"
              :size="item.size"
              :type="item.btnType">
          {{item.label}}
        </span>
      </template>
      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    table: {
      type: Object,
      default() {
        return {
          hasMergeRowOrColumn: false, // 是否合并单元格
          loading: false, // 加载中动画
          hasShowSummary: false, // 是否显示表位合计行
          border: false, // 是否带有纵向边框，默认为false
          hasSelect: false, // 有无选中功能
          hasOperation: false, // 有无操作功能
          hasOperationOne: false,
          hasExpand: false, // 有无展开行功能
          sortable: true, // 是否开启排序
          ShowTip: false, // 内容过长时
          tableHeight: "650",
          tHead: [
            {
              id: "1",
              label: "label",
              prop: "prop",
              className: "className",
              width: "",
              minWidth: "80",
              show: true
            }
          ],
          data: [],
          operation: {
            fixed: "right",
            label: "操作",
            width: "200",
            className: "",
            data: [
              {
                label: "编辑",
                Fun: "handleEdit",
                id: "1",
                size: "small",
                className: "show"
              }
            ]
          }
        };
      }
    }
  },
  data() {
    return {
      multipleSelection: []
    };
  },
  created() {
    // console.log(this.table.operation.data)
    // console.log('是否排序', this.table)
    // console.log('table', this.table.data)
    // console.log(this.table)
  },
  mounted() {
    // this.setTableHeight();
  },
  methods: {
    // 设置行样式
    RowStyle(res) {
      if (res.rowIndex % 2 === 0) {
        if (res.rowIndex === 0) {
          return `background-color:rgb(12,41,85); color:#fff;border-bottom:1px solid rgb(14,92,131);border-top:1px solid rgb(14,92,131)`;
        } else {
          return `background-color:rgb(12,41,85); color:#fff;border-bottom:1px solid rgb(14,92,131)`;
        }
      } else {
        return `background-color:rgb(8,18,45); color:#fff;border-bottom:1px solid rgb(14,92,131)`;
      }
    },
    handleOperation(index, row, id) {
      const data = this.table.operation.data;
      for (let i = 0; i < data.length; i++) {
        if (id === data[i].id) {
          this.$emit(data[i].Fun, index, row, id);
          // console.log(data[i].Fun, index, row)
        }
      }
    },
    filterHandler(value, row, column) {
      // console.log(column)
      const property = column["property"];
      return row[property] === value;
    },
    // 展开行内部按钮方法
    expandClick(obj, index, row) {
      this.$emit("expandList", obj, index, row);
    },
    // 多选行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("getOrderData", val);
      // console.log("this.multipleSelection :", this.multipleSelection);
    },
    // 超期提醒
    dateType({ row }) {
      const dtype = row.warnName;
      if (dtype === "超期") {
        return "timeOut";
      }
    },
    getTimeOut() {
      const oTimeOute = document.getElementsByClassName("timeOut");
      const oTitleTag = document.getElementsByClassName("title-tag");
      setTimeout(() => {
        // console.log("oTimeOute: ", oTimeOute.length);
        const tLength = oTimeOute.length;
        // if (tLength > 0) {
        //   // console.log("oTitleTag: ", oTitleTag);
        //   for (let i = 0; i < oTitleTag.length; i++) {
        //     const faGavel = oTitleTag[i].getElementsByClassName("fa-gavel");
        //     // console.log("faGavel: ", faGavel);
        //     for (let j = 0; j < faGavel.length; j++) {
        //       const element = faGavel[j];
        //       element.className = "fa fa-gavel remind-time-out";
        //       console.log("超期element: ", element);
        //     }
        //   }
        // }
        if (tLength > 0) {
          // console.log('oTitleTag:',oTitleTag)
          for (const item of oTitleTag) {
            const faGavel = item.getElementsByClassName("fa-gavel");
            for (const iter of faGavel) {
              const element = iter;
              element.className = "fa fa-favel remind-time-out";
              // console.log('超期element:',element)
            }
          }
        }
      }, 100);
    },
    setTableHeight() {
      const oMainDiv = document.getElementsByClassName("el-main");
      const oMainHeight = oMainDiv[0].offsetHeight || oMainDiv[0].clientHeight;
      const newHeight = oMainHeight - 148;
      this.table.tableHeight = newHeight;
    }
  }
};
</script>

<style lang='scss' scoped>
.scrollbar-over {
  // height: 200px;
  overflow: auto;
  border: 1px solid rgb(19, 103, 139);
}
.scrollbar-over::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.scrollbar-over::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: rgb(8, 18, 45);
  background-image: -webkit-linear-gradient(
    45deg,
    rgb(12, 41, 85) 25%,
    transparent 25%,
    transparent 50%,
    rgb(12, 41, 85) 50%,
    rgb(12, 41, 85) 75%,
    transparent 75%,
    transparent
  );
}
.scrollbar-over::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #d4e6f3c9;
  border-radius: 10px;
}
.table-vm {
  // height: 100%;
  // overflow-y: auto;
  // border: 1px solid rgb(19, 103, 139);
  &::before {
    height: 0;
  }
  background: none;
  /deep/ .el-table__header thead tr th {
    background: none;
    border: none;
  }
  .table-expand {
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .legal-terms-form {
    .el-form-item {
      margin-bottom: 10px;
      border-bottom: 1px dotted #ccc;
    }
  }
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
  // 操作按钮
  /deep/ .el-table__fixed-right::before{
    background: none;
  }
}
</style>

<style lang="scss" scoped>
.remind-time-out {
  animation: timeOuteTag 1.5s infinite;
}
@keyframes timeOuteTag {
  0% {
    color: #f56c6c;
    transform: scale(2.5);
  }
  25% {
    color: #e6a23c;
  }
  50% {
    color: #409eff;
    transform: scale(1);
    transform: rotate(-45deg);
  }
  75% {
    color: #67c23a;
  }
  100% {
    color: #f56c6c;
    transform: scale(2.5);
  }
}
</style>